Skip to content

Serve the root index.html for all client-side routes when hosted in Netlify or GitLab Pages#11356

Open
nfriend wants to merge 1 commit into
react:mainfrom
nfriend:nfriend-add-_redirects-file
Open

Serve the root index.html for all client-side routes when hosted in Netlify or GitLab Pages#11356
nfriend wants to merge 1 commit into
react:mainfrom
nfriend:nfriend-add-_redirects-file

Conversation

@nfriend
Copy link
Copy Markdown

@nfriend nfriend commented Sep 1, 2021

What does this PR do?

Adds a _redirects file that allows client-side pushState routing to work out of the box when deployed on Netlify or GitLab Pages.

More details about the _redirects file can be found here. Here's a section about this specific setup.

Relevant create-react-app docs

https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

How to test

  1. Create a new GitHub repo

  2. Scaffold a new project using this PR's branch of create-react-app

  3. Commit and push

  4. Using a Netlify account, connect Netlify to the new GitHub repo created in step #1

  5. Use the default Netlify options to deploy the site

  6. Verify that all URL routes result in the root index.html being served. For example, navigating to https://your-netlify-app-here.netlify.app/a/client/side/route should look like this:
    working

    In contrast, without the _redirects file, Netlify would serve up a 404 page:

    not-working

The process for testing on GitLab Pages is similar, although it involves a few extra steps (setting up a .gitlab-ci.yml pipeline to publish a Pages site).

@nfriend nfriend marked this pull request as ready for review September 2, 2021 02:14
@stale
Copy link
Copy Markdown

stale Bot commented Jan 9, 2022

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale Bot added the stale label Jan 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants